<template>
	<view :class="{'strict': strict == 1, 'detail-page': true}">
		<div class="post-person-wrap wrap">
			<div class="post-top">
				<div class="avatar">
					<image :src="detail && detail.header || require('../../static/image/avatar.png')" mode=""></image>
				</div>
				<div class="info">
					<h4>{{strictName(detail && detail.name)}}</h4>
					<p>{{detail.current_job_name}}</p>
				</div>
				<div class="price">{{detail.salary_name}}</div>
			</div>
			<div class="post-bottom">{{detail.province}}{{detail.city}}{{detail.district}} <template
					v-if="detail.educate_name">
					｜ {{detail.educate_name}}
				</template> <template v-if="detail.year">
					｜ {{detail.year}}年经验
				</template>
			</div>
		</div>

		<div class="work wrap">
			<div class="title">工作经历</div>
			<div class="list">
				<div class="item" v-for="(item,index) in detail.user_job_list" :key="index">
					<div class="info">
						<span>{{item.company}}</span>
						<div class="date">{{item.start_time}}-{{item.end_time}}</div>
					</div>
					<div class="info-bottom">
						<p>{{item.department_name}}</p>
						<span>{{item.current_job_name}}</span>
					</div>
				</div>

			</div>
		</div>

		<div class="project wrap">
			<!-- <leeDatetime @change="bindLeeDateTimeChange" placeholder="请选择日期时间" :value="leeDateTime">1232</leeDatetime> -->
			<div class="title">项目经验</div>
			<div class="list">
				<div class="item" v-for="(item,index) in detail.user_project_list" :key="index">
					<div class="info">
						<h3>{{item.project}}</h3>
						<div class="project-info">
							<p>{{item.company}}</p>
							<span>{{item.rule}}</span>
						</div>
						<div class="date">{{item.start_time}}-{{item.end_time}}</div>
					</div>
					<div class="msg">
						<span>职位职责：</span>
						<div class="content">
							{{item.content}}
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="action-wrap">
			<div class="btn-wrap">
				<button @click="onClickChart">立即联系</button>
				<picker v-if="myJobs.length > 0" range-key="name" :range="myJobs" @change="onChangeMyJob">
					<button class="ms">面试邀请</button>
				</picker>
				<button class="ms" v-else @click="verifyJob">面试邀请</button>
				<!-- <button @click="interviewDate_show = true">面试邀请</button> -->
			</div>
			<div class="mobile-wrap" @click="onClickPhoneCall">
				<image src="../../static/image/ico@2x.png" mode=""></image>
				<span>电话联系</span>
			</div>
		</div>

		<InterviewInvitation @close="interviewDate_show = false" @confirm="onClickDelivery" v-if="interviewDate_show">
		</InterviewInvitation>


		<!-- 严选 来人直通 -->
		<div class="strict-wrap" v-if="strict == 1">
			<SSButton title="来人直通" @click="onClickThrough" />
		</div>
	</view>
</template>

<script>
	import SSButton from '@/components/Button.vue'
	import InterviewInvitation from "@/components/InterviewInvitation.vue"

	export default {
		components: {
			SSButton,
			InterviewInvitation
		},
		data() {
			return {
				detail: null, // 详情信息
				heUserId: '',
				strict: 0,

				leeDateTime: '',

				interviewDate_show: false,

				myJobs: [],
				myJobData: null,
				
				user: null,
				isVip: false
			};
		},
		onLoad({
			id,
			strict
		}) {
			this.user = uni.getStorageSync('userInfo')
			this.heUserId = id
			this.strict = strict
			this.getCattleDetail(id)
			this.getMyJobs()

		},
		computed: {
			strictName() {
				return (name) => {
					if (this.user && !this.isVip && this.strict == 1) {
						return name && name.slice(0, 1) + '**'
					} else {
						return name
					}
				}
			}
		},
		methods: {
			async onClickChart() {
				let user = uni.getStorageSync('userInfo')
				if (user.is_auth == 0) {
					return uni.showToast({
						title: '未认证',
						icon: 'none'
					})
				}
				// 私聊前投递一次简历
				await this.$http.Recruit.delivery(this.detail.id)
				uni.navigateTo({
					url: '../message/chart?sendId=' + this.detail.id
				})
			},

			// 获取招聘详情
			async getCattleDetail(id) {
				const {
					data
				} = await this.$http.Company.getCattleDetail(id)
				this.detail = data.cattle_info
				this.isVip = data.is_vip
				if(data.is_vip) {
					this.strict = 0
				}
				// this.getJob()
			},
			async getMyJobs() {
				const {
					data
				} = await this.$http.Company.jobpublish()
				this.myJobs = data.data

			},
			verifyJob() {
				let user = uni.getStorageSync('userInfo')
				if (user.is_auth == 0) {
					return uni.showToast({
						title: '未认证',
						icon: 'none'
					})
				}
				if (this.myJobs.length <= 0) {
					return uni.showToast({
						title: '您还没发布职位，请先发布职位',
						icon: 'none'
					})
				}
			},
			onChangeMyJob(e) {

				this.myJobData = this.myJobs[e.detail.value]
				this.interviewDate_show = true
			},

			// 面试邀请
			async onClickDelivery(time) {
				const {
					code,
					msg,
					data
				} = await this.$http.Company.interview({
					job_id: this.myJobData.id,
					uid: this.heUserId,
					start_time: time
				})
				uni.showToast({
					title: code == 200 ? "邀请成功" : msg,
					icon: 'none'
				})
				
				
				this.interviewDate_show = false

				if (code == 200) this.sendIm(time, data)

			},
			// 发送面试邀请
			async sendIm(time, data) {
				const {
					code,
					msg
				} = await this.$http.Message.sendIm({
					to_id: this.heUserId,
					message: 'TYPE_INVITE_' + this.heUserId + '&TIME=' + time + '&MSID=' + data
				})
			},
			onClickThrough() {
				uni.navigateTo({
					url: '../index/passThrough'
				})
			},

			// 打电话
			onClickPhoneCall() {
				if(!this.is_vip) {
					return uni.showModal({
						title:"提示",
						content:'仅为VIP企业提供，请先开通VIP',
						success: ({ confirm }) => {
							if(confirm) {
								uni.navigateTo({
									url:'/pages/index/passThrough'
								})
							}
						}
					})
				}
				uni.makePhoneCall({
					phoneNumber: this.detail.mobile
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.detail-page {
		padding: 0 32upx;
		padding-bottom: calc(129upx + env(safe-area-inset-bottom));

		&.strict {
			height: 100vh;
			overflow: hidden;
			box-sizing: border-box;
			position: fixed;
			top: 0%;
			bottom: 0%;
			height: 100vh;
			width: 100vw;
		}

		.strict-wrap {
			position: fixed;
			bottom: 0%;
			left: 0%;
			right: 0%;
			background: rgba(255, 255, 255, .9);
			height: 50vh;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			padding-bottom: 32upx;
			padding-bottom: env(safe-area-inset-bottom);

			button {}
		}

		.wrap {
			box-shadow: 0px 0px 10px 2px rgba(241, 241, 241, 1);
			background: #fff;
			border-radius: 8upx;
			padding: 32upx;
			margin-top: 20upx;
		}

		.post-wrap {
			display: flex;
			align-items: center;
			margin-top: 10upx;

			.left {
				flex: 1;

				span {
					color: #28211F;
					font-size: 28upx;
					font-weight: 600;
				}

				p {
					color: #666E7A;
					font-size: 22upx;
					font-weight: 400;
				}
			}

			.price {
				color: #2AABE2;
				font-size: 28upx;
				font-weight: 600;
			}
		}

		.post-person-wrap {
			margin-top: 20upx;
			display: flex;
			padding: 34upx;
			flex-direction: column;

			.post-top {
				display: flex;
				align-items: center;

				.avatar {
					width: 82upx;
					height: 82upx;
					border-radius: 82upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 82upx;
					}
				}

				.info {
					margin-left: 22upx;
					flex: 1;

					h4 {
						color: #28211F;
						font-size: 28upx;
						line-height: 28upx;
						font-weight: 600;
					}

					p {
						color: #28211F;
						font-size: 22upx;
						line-height: 22upx;
						font-weight: 400;
						margin-top: 16upx;
					}
				}

				.price {
					color: #2AABE2;
					font-size: 28upx;
					font-weight: 600;
				}
			}

			.post-bottom {
				color: #666E7A;
				font-size: 22upx;
				font-weight: 400;
				margin-top: 26upx;
			}

		}

		.work {
			.title {
				color: #28211F;
				font-size: 28upx;
				font-weight: 600;
			}

			.list {
				padding-top: 2upx;

				.item {
					padding-bottom: 34upx;
					border-bottom: 1px solid #EEEEEE;
					padding-top: 32upx;

					.info {
						display: flex;
						align-items: center;

						span {
							flex: 1;
							color: #28211F;
							font-size: 28upx;
							font-weight: 600;
						}

						.date {
							color: #666E7A;
							font-size: 24upx;
							font-weight: 400;
						}
					}

					.info-bottom {
						display: flex;
						align-items: center;
						margin-top: 18upx;
						line-height: 24upx;

						p {
							color: #2AABE2;
							font-size: 24upx;
							font-weight: 400;
							margin-right: 22upx;
						}

						span {
							color: #666E7A;
							font-size: 24upx;
							font-weight: 400;
						}
					}
				}
			}
		}

		.project {
			.title {
				color: #28211F;
				font-size: 28upx;
				font-weight: 600;
			}

			.list {
				padding-bottom: 100upx;
				padding-top: 2upx;

				.item {
					margin-top: 32upx;
					padding-bottom: 34upx;
					border-bottom: 1px solid #EEEEEE;

					&:last-of-type {
						border-bottom: unset;
					}

					.info {
						display: flex;
						flex-direction: column;

						h3 {
							color: #28211F;
							font-size: 28upx;
							font-weight: 600;
						}

						.project-info {
							margin-top: 12upx;
							display: flex;
							align-items: center;

							span,
							p {
								color: #666E7A;
								font-size: 24upx;
								font-weight: 400;
							}

							p {
								color: #2AABE2;

							}

							span {
								margin-left: 22upx;
							}
						}

						.date {
							margin-top: 8upx;
							color: #666E7A;
							font-size: 24upx;
							font-weight: 400;
						}
					}

					.msg {
						margin-top: 38upx;

						span,
						.content {
							color: #666E7A;
							font-size: 24upx;
							font-weight: 400;
						}
					}
				}
			}
		}

		.action-wrap {
			position: fixed;
			bottom: 0%;
			left: 0%;
			right: 0;
			border-top: 1px solid #EEEEEE;
			background: #fff;
			box-shadow: 0px 3px 10px #EEEEEE;

			padding: 20upx 32upx;
			padding-bottom: env(safe-area-inset-bottom);
			display: flex;
			align-items: center;

			.btn-wrap {
				display: flex;
				align-items: center;
				flex: 1;
			}

			.ms {
				margin-left: 50upx !important;
				color: #2AABE2 !important;
				border: 1px solid #2AABE2 !important;
				background: #fff !important;

				&::after {
					border-color: #fff !important;
				}
			}

			button,
			.ms {
				width: 246upx;
				height: 88upx;
				border-radius: 88upx;
				color: #fff;
				font-size: 24upx;
				font-weight: 500;
				line-height: 88upx;
				background: #2AABE2;
				margin: 0;


			}

			.mobile-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 33upx;
					height: 37upx;
					margin-bottom: 14upx;
				}

				span {
					color: #666E7A;
					font-size: 20upx;
					font-weight: 400;
					line-height: 20upx;
				}
			}

		}
	}
</style>
